<template>
  <!-- 添加和修改课时表单 -->
  <el-dialog :visible="dialogVisible" title="添加课时" @close="close()">
    <el-form :model="video" label-width="120px">
      <el-form-item label="课时标题">
        <el-input v-model="video.title" />
      </el-form-item>
      <el-form-item label="课时排序">
        <el-input-number v-model="video.sort" :min="0" />
      </el-form-item>
      <el-form-item label="是否免费">
        <el-radio-group v-model="video.isFree">
          <el-radio :label="true">免费</el-radio>
          <el-radio :label="false">默认</el-radio>
        </el-radio-group>
      </el-form-item>

      <!-- 上传视频 -->
      <el-form-item label="上传视频">
        <el-upload
          ref="upload"
          :auto-upload="false"
          :on-success="handleUploadSuccess"
          :on-error="handleUploadError"
          :on-exceed="handleUploadExceed"
          :before-remove="handleBeforeRemove"
          :on-remove="handleOnRemove"
          :file-list="fileList"
          :limit="1"
          accept="video/mp4,video/webm,video/ogg"
          :action="BASE_API + '/admin/vodMedia/upload'"
        >
          <el-button
            slot="trigger"
            size="small"
            type="primary"
            @click="updateStatus()"
            >选择视频</el-button
          >
          <el-button
            :disabled="uploadBtnDisabled"
            style="margin-left: 10px"
            size="small"
            type="success"
            @click="submitUpload()"
            >上传</el-button
          >
        </el-upload>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="close()">取 消</el-button>
      <el-button type="primary" @click="saveOrUpdate()">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { save, getById, updateById, removeVodById } from "@/api/video";

export default {
  data() {
    return {
      dialogVisible: false, // 是否显示对话框
      video: {
        sort: 0,
        isFree: false,
      },
      fileList: [], // 上传文件列表
      uploadBtnDisabled: true,
      BASE_API: process.env.VUE_APP_BASE_API
    };
  },

  methods: {
    updateStatus() {
      this.uploadBtnDisabled = false;
    },
    // 上传多于一个视频
    handleUploadExceed(files, fileList) {
      this.uploadBtnDisabled = true;
      this.$message.warning("请先移除已选择的视频！");
    },
    // 上传
    submitUpload() {
      this.uploadBtnDisabled = true; // 禁用按钮
      this.$refs.upload.submit(); // 提交上传请求
    },
    // 视频上传成功的回调
    handleUploadSuccess(response, file, fileList) {
      if (response.success) {
        this.video.videoSourceId = response.data;
        this.video.videoOriginalName = file.name;
      } else {
        this.$message.error(response.message);
      }
    },
    // 失败回调
    handleUploadError() {
      this.$message.error("网络错误！上传失败");
    },
    // 删除视频文件确认
    handleBeforeRemove(file, fileList) {
      return this.$confirm(`确定要移除 ${file.name}？`);
    },
    // 删除视频
    handleOnRemove(file, fileList) {
      if (!this.video.videoSourceId) {
        return;
      }

      removeVodById(this.video.videoSourceId).then((response) => {
        if (response.success) {
          this.video.videoSourceId = "";
          this.video.videoOriginalName = "";
          if (this.video.id) {
            // 删除视频的同时更新video数据信息
            updateById(this.video);
          }
          this.$message.success(response.message);
        }else{
          this.$message.error(response.message);
        }
      });
    },

    // 显示对话框
    open(chapterId, videoId) {
      this.dialogVisible = true;
      this.video.chapterId = chapterId;
      if (videoId) {
        getById(videoId).then((response) => {
          this.video = response.data;
          //视频文件回显
          if (this.video.videoSourceId) {
            this.fileList = [{ name: this.video.videoOriginalName }];
          }
        });
      }
    },

    // 关闭页面
    close() {
      this.dialogVisible = false;
      // 重置表单
      this.resetForm();
    },

    resetForm() {
      this.video = {
        sort: 0,
        isFree: false,
      };
      // 清空文件列表
      this.fileList = [];
    },

    // 保存和更新
    saveOrUpdate() {
      this.video.id ? this.update() : this.saveVideo();
    },

    saveVideo() {
      this.video.courseId = this.$parent.$parent.courseId;
      save(this.video).then((response) => {
        if (response.success) {
          this.$message.success(response.message);
          // 关闭组件
          this.close();
          // 刷新列表
          this.$parent.fetchNodeList();
        } else {
          this.$message.error(response.message);
        }
      });
    },

    update() {
      updateById(this.video).then((response) => {
        if (response.success) {
          this.$message.success(response.message);
          // 关闭组件
          this.close();
          // 刷新列表
          this.$parent.fetchNodeList();
        } else {
          this.$message.error(response.message);
        }
      });
    },
  },
};
</script>
